<script setup lang="ts">
import { computed, watch } from "vue";
import { useRoute } from "vue-router";

import ProForm from "@/modules/package/form/components/ProForm.vue";
import { ProInputNumber, ProRadioGroup } from "@/modules/package/form";
import ProSelect from "@/modules/package/form/components/ProSelect.vue";

import useForm from "@/hooks/useForm";

import ApiActivity from "@/api/activity";
import ApiTicket from "@/api/ticket";
import usePage from "@/hooks/usePage";

const emits = defineEmits<{
  success: [];
}>();

const { params } = useRoute();

const act_id = +params.actId;

// 获取场次
const { list } = usePage<any>(ApiActivity.etimeList, {
  size: 2000,
  defaultSearch: { act_id },
});

const etimeOptions = computed(() =>
  list.value.map((e) => ({ label: e.etime_title, value: e.id, ...e }))
);

const formItems = [
  {
    label: "权益包模板",
    children: {
      field: "pkg_id",
      type: ProSelect,
      props: {
        remote: true,
        filterable: true,
        valueKey: "id",
        labelKey: "package_title",
        fetchUrl: ApiActivity.packageList,
      },
    },
  },

  {
    label: "活动权益包",
    children: {
      field: "ticket_id",
      type: ProSelect,
      props: {
        valueKey: "id",
        labelKey: "ticket_title",
        fetchUrl: ApiActivity.ticketList,
        fetchOptions: { defaultSearch: { act_id } },
      },
    },
  },

  {
    label: "活动场次",
    children: {
      field: "etime_id",
      type: ProRadioGroup,
      props: {
        options: etimeOptions,
      },
    },
  },
  {
    label: "单次生成赠票码数量",
    children: {
      field: "code_num",
      type: ProInputNumber,
      props: {
        precision: 0,
        min: 1,
      },
    },
  },
  {
    label: "单次领取票券数量",
    children: {
      field: "amount",
      type: ProInputNumber,
      props: {
        precision: 0,
        min: 1,
      },
    },
  },
];

const { refForm, isFetching, model, reset, submit, onFetchResponse } = useForm(
  ApiTicket.addTicketSendTask,
  {
    defaultModel: {
      act_id,
      amount: 1,
      code_num: 1,
      ticket_id: "",
      etime_id: "",
      pkg_id: "",
    },
  }
);

onFetchResponse(() => emits("success"));

const rules = {
  pkg_id: { required: true, message: "请选择权益包模板" },
  ticket_id: { required: true, message: "请选择门票" },
  etime_id: { required: true, message: "请选择场次" },
  code_num: { required: true, message: "请输入单次生成赠票码数量" },
  amount: { required: true, message: "请输入单次领取票券数量" },
};
</script>

<template>
  <ProForm
    :col="24"
    ref="refForm"
    :rules="rules"
    :model="model"
    :loading="isFetching"
    :form-items="formItems"
    label-width="11em"
    @reset="reset"
    @submit="submit"
  >
  </ProForm>
</template>
